<template>
  <div class="container">
    <el-row :gutter="20">
      <div class="clearfix">
        <div class="crumbs">公众号设置</div>
        <div class="btn-save">
          <el-button type="primary" @click="saveClick('ruleForm')">保存</el-button>
        </div>
      </div>
      <div class="form-box">
        <el-form :model="ruleForm" ref="ruleForm" label-width class="eidt-el-form">
          <div class="title-txt">1.公众号信息绑定</div>
          <el-form-item label="1 打开微信公众平台"></el-form-item>
          <el-form-item label="2 下载绑定域名的校验文件"></el-form-item>
          <el-form-item label="3 上传校验文件">
            <el-upload
                class="upload-demo"
                :action="action"
                :on-success="handleAvatarSuccess"
                :auto-upload="true"
                :on-change="uploadChange"
                multiple
                accept=".txt"
              >
                <el-button size="small" type="primary" plain icon="el-icon-upload2">上传校验文件.txt格式</el-button>
              </el-upload>
          </el-form-item>
          <el-form-item label="4 绑定当前域名到微信公众平台的登录验证域名和js安全域名"></el-form-item>
          <el-form-item prop="appId" label="5 获取微信公众号appID" class="el-item-wrap">
            <el-input v-model="ruleForm.appId" placeholder="微信AppId" class="wx-el-input"></el-input>
          </el-form-item>
          <el-form-item prop="appSecret" label="6 获取微信公众号密钥" class="el-item-wrap">
            <el-input v-model="ruleForm.appSecret" placeholder="微信秘钥" class="wx-el-input"></el-input>
          </el-form-item>
          <div class="title-txt">2.微信商户信息绑定</div>
          <el-form-item label="1 打开微信商户平台"></el-form-item>
          <el-form-item label="2 申请JS微信支付接口"></el-form-item>
          <el-form-item prop="merchantId" label="3 设置微信商户ID和支付密钥" class="el-item-wrap">
            <el-input v-model="ruleForm.merchantId" placeholder="商户ID" class="wx-el-input"></el-input>
          </el-form-item>
          <el-form-item prop="paySecret" label="4 设置微信商户支付密钥" class="el-item-wrap">
            <el-input v-model="ruleForm.paySecret" placeholder="支付秘钥" class="wx-el-input"></el-input>
          </el-form-item>
          <el-form-item label="5 设置微信支付URL地址：">            
            <el-input v-model="buyUrl" readonly=""  class="wx-el-input"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "editprojectmanage",
  data() {
    return {
      rules: {
        appId: [{ required: true, message: "请输入微信公众号appId", trigger: "blur" }],
        appSecret: [{ required: true, message: "请输入微信公众号密钥", trigger: "blur" }],
        merchantId: [{ required: true, message: "请输入微信商户号", trigger: "blur" }],
        paySecret: [{ required: true, message: '请输入微信商户密钥', trigger: "blur" }],
      },
      ruleForm: {
        appId: "",
        appSecret: "",
        merchantId: "",
        paySecret: "",
        projectId: "",
      },
      action:localStorage.getItem("url")+"/Project/UploadTxt",
      buyUrl:localStorage.getItem("url").replace('/api','/wechat/index/')
    };
  },
  created() {
    this.$axios.get("/Project/"+localStorage.getItem("project_Id")).then(res => {
      if (res.data.hasError == false) {
        
        this.ruleForm.appId=res.data.data.appId;
        this.ruleForm.appSecret=res.data.data.appSecret;
        this.ruleForm.merchantId=res.data.data.merchantId;
        this.ruleForm.paySecret=res.data.data.paySecret;
        this.ruleForm.projectId=res.data.data.projectId;
      }});
  },
  methods: {
    saveClick(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          this.$axios.put("/Project/", this.ruleForm).then(res => {
            if (res.data.hasError == false) {
              this.$message.success("保存成功！");
              this.goBack();
              this.$refs[ruleForm].resetFields();
            } else {
              this.$message.error("保存失败！");
            }
          });
        } else {
          return false;
        }
      });
    },
    handleAvatarSuccess() {},
    uploadChange(file) {
    },
  }
};
</script>

<style lang="scss" scope>
.crumbs {
  color: #333;
}
.title-txt {
  color: #f20;
  height: 50px;
  line-height: 50px;
}
.el-form-item {
  margin-left: 20px;
}
.wx-el-input {
  width: 30%;
  margin-right: 20px;
}
.el-upload.el-upload--text {
  height: 35px !important;
  line-height: 35px;
  width: 180px !important;
  border: 0!important;
}
</style>